<template>
  <div style="width: 100%; height: 100%; padding: 24px; display: flex">
    <div style="width: 100%; height: 100%; background: #ffffff">
      <div class="detail-header">
        <div style="
                                flex: 1 1 0%;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                              ">
          <div style="display: flex; align-items: center">
            <span style="font-size: 24px; font-weight: 500">
              {{ detailsData.info.deviceName }}
            </span>
            <span style="margin-left: 48px">
              编号：{{ detailsData.info.deviceCode }}
            </span>
            <el-tag class="tag-container"
              :type="detailsData.info.status === 1 ? 'danger' : 'success'">
              <span class="status-circle"
                :style="{
                  background:
                    detailsData.info.status === 1
                      ? '#ed6c6b'
                      : 'rgba(64, 227, 97, 1)'
                }" />
              {{ detailsData.info.deviceRunningState }}
            </el-tag>
          </div>
          <el-button @click="exitDetail()"
            style="width: 84px; height: 32px">
            返回
          </el-button>
        </div>
      </div>
      <el-tabs v-model="activeName"
        style="padding: 0 24px 0px; height: calc(100% - 100px)">
        <el-tab-pane label="实时数据"
          name="first"
          class="real-time-chart-container box-card"
          style="overflow: auto; height: 100%">
          <div class="chart-box">
            <ChartTemplate
              :chartOption="realTimeChartOption(detailsData, '用电能耗')" />
          </div>
          <div class="chart-box">
            <ChartTemplate
              :chartOption="realTimeChartOption(detailsData, '功率因数')" />
          </div>
          <div class="chart-box">
            <ChartTemplate
              :chartOption="realTimeChartOption(detailsData, '电流')" />
          </div>
          <div class="chart-box">
            <ChartTemplate
              :chartOption="realTimeChartOption(detailsData, '电压')" />
          </div>
          <div class="chart-box">
            <ChartTemplate
              :chartOption="realTimeChartOption(detailsData, '功率')" />
          </div>
          <div class="chart-box">
            <ChartTemplate
              :chartOption="realTimeChartOption(detailsData, '温度')" />
          </div>
          <div class="chart-box">
            <ChartTemplate
              :chartOption="realTimeChartOption(detailsData, '电弧')" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="告警记录"
          name="second"
          style="overflow: auto; height: 100%"
          class="box-card">
          <tabItem v-if="activeName == 'second'"
            :tabId="activeName"
            :deviceCode="detailsData.info.deviceCode"
            :str="'报警次数'" />
        </el-tab-pane>
        <el-tab-pane label="故障记录"
          name="third"
          style="overflow: auto; height: 100%"
          class="box-card">
          <tabItem v-if="activeName == 'third'"
            :tabId="activeName"
            :deviceCode="detailsData.info.deviceCode"
            :str="'故障次数'" />
        </el-tab-pane>
        <el-tab-pane label="关联工单"
          name="fourth"
          style="overflow: auto; height: 100%"
          class="box-card">
          <tabItem v-if="activeName == 'fourth'"
            :tabId="activeName"
            :deviceCode="detailsData.info.deviceCode"
            :str="'工单数量'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ChartTemplate from "@/components/Chart/ChartTemplate"; //图表模板
import { realTimeChartOption } from "../chartOption";
import tabItem from "../associatedWorkOrder.vue";
export default {
  components: {
    ChartTemplate,
    tabItem
  },
  props: {
    /** 图表详情 */
    detailsData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      realTimeChartOption: realTimeChartOption,
      activeName: "first"
    };
  },
  mounted () {
    // console.log(this.detailsData.info);
  },
  methods: {
    exitDetail () {
      this.$emit("exitDetail");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../../styles/part-custom";

.detail-header {
  height: 79px;
  padding: 27px 26px 16px;
}

.chart-box {
  width: 49%;
  height: 48%;
  border: 1px solid #e6e8eb;
}

.status-circle {
  width: 10px;
  height: 10px;
  border-radius: 319px;
  background: black;
  margin-right: 4px;
}

.tag-container {
  display: flex;
  align-items: center;
  margin-left: 34px;
  width: 59px;
  height: 25px;
}

.real-time-chart-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 1%;
  row-gap: 2%;
  height: 100%;
  padding-top: 22px;
}

>>>.el-tabs__header {
  margin: 0 !important;
}

>>>.el-button {
  margin-right: 0 !important;
}

>>>.el-tabs__content {
  height: calc(100% - 40px);
}
</style>
